<template>
<view class="page">
	<view class="header-box">
		<view class="icon-nav" @click="bankBtn"></view>
		<view class="search-box">
			<picker class="goods-item" @change="typeBtn" range-key="name" :range="typeArr">
				{{type_label}} <text class="icon-tri"></text>
			</picker>
			<view class="line"></view>
			<input type="text" value="" placeholder="请输入商户..." v-model="ruleForm.search" class="header-input" />
		</view>
	</view>
	<view class="tab-box">
		<view class="item" v-for="(a,i) in tabList" :class="{on:tabIndex==i}" @click="tabBtn(i)">
			{{a.name}} <text class="icon-tri"></text>
		</view>
	</view>
	<view class="pad shop-list">
		<view class="item" v-for="(a,i) in goodsList" :key="i">
			<view class="shop-name">
				<view class="left">
					<image :src="a.logo" class="shop-avatar"  mode=""></image>
					<view class="info">
						<view class="item1">
							{{a.shop_name}}
						</view>
						<view class="item2">
							{{a.address}}
						</view>
					</view>
				</view>
				<navigator :url="'./merchantsDtl?id='+a.shop_id" class="right">
					进入
				</navigator>
			</view>
			<view class="goods-list">
				<view class="goods-item" v-for="(v, j) in a.children" :key="j">
					<image :src="v.goods_image" class="goods-img" mode=""></image>
					<view class="goods-price">
						CD ￥ <text class="int">{{ v.goods_sku.goods_price.toString().split('.')[0] }}</text>.{{ v.goods_sku.goods_price.toString().split('.')[1] }}
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	import {isLogin, shopLists, shopDetail} from '@/api/substitution.js'
	
	export default {
		data(){
			return {
				typeArr:[{name:'商品'},{name:'商户'}],
				type_label:'商户',
				goodsList:[],
				tabList:[{name:'综合',value:0},{name:'位置'},{name:'销量'}],
				tabIndex:0,
				page:0,
				
				ruleForm: {
					page: 1,
					sortType: 'all',
					sortPrice: 0,
					search: '',
					longitude: '',
					latitude: ''
				},
				urlType: null,
			}
		},
		onLoad(e) {
			this.urlType = e.url;
			
			isLogin();
			
			this.ruleForm.search = e.title;
			
			this.getData();
		},
		methods: {
			bankBtn(){
				switch (parseInt(this.urlType)) {
					case 1:
						uni.navigateTo({
							url: '/mallShop/home/home'
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/mallShop/cate/cate'
						});
						break;
				}
			},
			
			typeBtn(event){
				uni.navigateTo({
					url: './searchRes?title=' + this.ruleForm.search + '&url=' + this.urlType
				})
			},
			
			tabBtn(i){
				this.tabIndex = i;
			},
			
			// 商家列表
			getData(){
				shopLists(this.ruleForm).then(res=>{
					res.data.list.forEach(item => {
						item.children = []
						shopDetail({
							shop_id: item.shop_id
						}).then(r => {
							item.logo = r.data.detail.logo.file_path
							r.data.goods.data.forEach((i, index) => {
								if (index < 3) {
									item.children.push(i)
								}
							})
						})
					})
					this.goodsList = res.data.list;
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.icon-tri{
		display: inline-block;
		vertical-align: middle;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #cdcdcd;
		margin-left:20rpx;
	}
	.header-box{
		display: flex;
		padding:50rpx 30rpx 20rpx;
		@include  bgGradient();
		height: 80rpx;
		position: relative;
		line-height: 80rpx;
		position: relative;
		align-items: center;
		justify-content: center;
		.icon-nav{
			position: absolute;
			top:60%;
			left: 30rpx;
			transform: translateY(-50%) rotate(-45deg);
			border-top:1px solid #FFF;
			border-left:1px solid #FFF;
			width: 20rpx;
			height: 20rpx;
			flex:0;
		}
		.search-box{
			display: flex;
			background: #FFFFFF;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			.line{
				width: 4rpx;
				height: 50rpx;
				background-color: #EFEFEF;
				position: relative;
				top:50%;
				transform: translateY(-50%);
			}
			.goods-item{
				width: 140rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
			}
			.header-input{
				flex:1;
				background: url('/static/images/mallShop/search.png') no-repeat 10px center;
				background-size:26rpx 26rpx;
				padding-left: 80rpx;
				height: 70rpx;
				color: #333333;
			}
		}
	}
	.tab-box{
		// display: flex;
		display: none;
		width: 100%;
		height: 100rpx;
		align-items: center;
		background-color: #FFFFFF;
		.item{
			flex:1;
			text-align: center;
			color: #999999;
			&.on{
				color: #333333;
				.icon-tri{
					border-top:5px solid #999999;
				}
			}
		}
	}
	.shop-list{
		padding: 0 30rpx;
		margin-top: 20rpx;
		.item{
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			padding:20rpx;
			margin-bottom:20rpx;
			.shop-name{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					.shop-avatar{
						width: 66rpx;
						height: 66rpx;
						border-radius: 50%;
						margin-right:20rpx;
					}
					.info{
						.item1{
							color: #333333;
							font-size: 34rpx;
						}
						.item2{
							margin-top: 5rpx;
							color: #666666;
							font-size: 26rpx;
						}
					}
				}
				.right{
					@include btnStyle(100,50);
					@include flexCenter();
					color: #FE7B47;
					border:1px solid #FE7B47;
				}
				
			}
			.goods-list{
				display: flex;
			}
		}
	}
	.goods-list{
		display: flex;
		margin-top:20rpx;
		.goods-item{
			width: 210rpx;
			height: 210rpx;
			margin-right:10rpx;
			position: relative;
			.goods-img{
				width: 210rpx;
				height: 210rpx;
				object-fit: cover;
				border:1px solid #eee;
				box-sizing: border-box;
			}
			.goods-price{
				position: absolute;
				bottom: 0;
				left: 0;
				height: 70rpx;
				line-height: 70rpx;
				background: rgba(0,0,0,.5);
				color: #F13A1D;
				font-size: 22rpx;
				width: 100%;
				text-align: center;
				.int{
					font-size: 26rpx;
				}
			}
		}
	}
</style>
